<template>
    <div>
        <!--  企业服务 -->
        <div class="tou">
            <header1 now=2></header1>
        </div>
        <el-carousel height="100vh" direction="vertical" :autoplay="false" trigger='click' :loop="false" ref="e1lunbo">
            <el-carousel-item>
              <div class="qiye-l1">
                <!-- <img src="/ayb-qiye/qyfw104_7e4df2b.png" width='100%' height='100%'> -->
              </div>
            </el-carousel-item>

            <el-carousel-item>
              <div class="qiye-l2 L2">
                <div >
                  <div style="height:25vh"></div>
                    <div >
                      <img src="/ayb-qiye/servicesTitle_06e802b.png" style="display:block;margin:auto">
                      <p class="qiye-l2p">针对企业实际需求，提供更专业的后勤服务</p>
                    </div>
                    <div style="">
                      <img src="/ayb-qiye/charts_33b4fc7.png" style="display:block;margin:auto">
                    </div>
                 
                </div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="qiye-l2" style="">
                <div>
                    <div  style="margin-top: 20vh">
                      <img src="/ayb-qiye/cooperationCase_e6ac3a0.png" style="display:block;margin:auto">

                      <p class="qiye-l2p">众多明星企业正在享受阿姨帮的品质服务</p>
                    </div>
                    <div >
                      <img src="/ayb-qiye/cooperationExample_aac21ba.png" style="display:block;margin:auto">
                    </div>
                </div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
                <div class="qiye-l2 L4" >
                <div >
                   <div style="height:20vh"></div>
                    <div >
                      <img src="/ayb-qiye/reason_8c0fd13.png" style="display:block;margin:auto">
                      <p class="qiye-l2p">众多明星企业正在享受阿姨帮的品质服务</p>
                    </div>
                    <div style="">
                      <img src="/ayb-qiye/reasonForAyibang_23a694f.png" style="display:block;margin:auto">
                    </div>
                </div>
              </div>
                <div class="wei">
                    <footer1></footer1>
                </div>
            </el-carousel-item>
        </el-carousel>

    </div>
</template>

<script>
import header1 from "./H-header.vue";
import footer1 from "./H-footer.vue";

export default {
  components: {
    header1,
    footer1
  },
  mounted() {
    var throldHold = 200; //规定时间
    var flag = true;
    window.onmousewheel = document.onmousewheel = e => {
      if (flag) {
        flag = false;
        this.scrollFunc(e);
        setTimeout(function() {
          flag = true;
        }, throldHold);
      }
    };
  },
  data() {
    return {
      lunbo: 0 //轮播id
    };
  },
  methods: {
    scrollFunc(e) {
      e = e || window.event;
      if (e.wheelDelta) {
        if (e.wheelDelta > 0) {
        //   alert("鼠标向上滚动");
          if (this.lunbo <= 3 && this.lunbo > 0) {
            this.lunbo--;
            this.$refs.e1lunbo.setActiveItem(this.lunbo);
          }
        } else if (e.wheelDelta < 0) {
        //   alert("鼠标向下滚动");
          if (this.lunbo < 3 && this.lunbo >= 0) {
            this.lunbo++;
            this.$refs.e1lunbo.setActiveItem(this.lunbo);
          }
        }
      }
    //    else if (e.detail) {
    //     //兼容性处理
    //     if (e.detail > 0) {
    //       alert("鼠标向上滚动");
    //     } else if (e.detail < 0) {
    //       alert("鼠标向下滚动");
    //     }
    //   }
    }
  }
};
</script>

<style lang="scss" scoped>
// 头尾样式
.tou {
  position: fixed;
  top: 0;
  z-index: 999;
  animation: move3 0.8s ease-in forwards;
}
.wei {
  position: fixed;
  bottom: 0;
  z-index: 999;
}
// 主页面轮播图
el-carousel-item {
  height: 100vh;
  width: 100vw;
  position: relative;
}
@keyframes move3 {
  0% {
    transform: translateY(-80px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
}
// 页面样式
.qiye-l1{
  width: 100vw;
  height: 100vh;
  background: url('../assets/ayb-qiye/qyfw104_7e4df2b.png') no-repeat;
}
.qiye-l2{
  width: 100vw;
  height: 100vh;
  // background: url('../assets/ayb-qiye/background2_4aa2cfe.jpg') no-repeat;
  &>div{
     width: 1200px;
    height: 800px;
    margin: auto;
   
  }
  .qiye-l2p{
    text-align:center;
    margin:12px 0;
    font-size: 14px;
    color: #999;
  }
}
.L2{

   background: url('../assets/ayb-qiye/background2_4aa2cfe.jpg') no-repeat !important;
}
.L4{

   background: url('../assets/ayb-qiye/background4_0e2571e.jpg') no-repeat !important;
}
</style>